<template>
	<view>
		<view class="nav ">
			<u-tabs :activeStyle="{color:'#333'}" :scrollable="false" @change="glist" :current="tabsindex"
				lineColor="#0083FE" :list="tabs"></u-tabs>
		</view>
		<view v-if="list.length==0">
			<u-empty marginTop="80"  :icon="$imgSrc('static/images/empty.png')"></u-empty>
		</view>
		<view class="h10"></view>
		<view v-if="tabsindex==0">
			<!-- 抬头管理 -->
			<view class="pl20 pr20 address-card" v-for="(item,index) in list" :key="index">
				<view class="bgfff path-card">
					<view class="pt20 pl36 pr20 ">
						<view class="dsf alc pb20 ">
							<view class="fz28 col666">{{item.title}}</view>
						</view>
						<view class="pb20">
							<view class=" pb20">
								<view class="dsf alc pb20">
									<view class="fz28 col666">{{item.duty_number}}
										<text class="fz28 col666 address-detail">(纳税人识别号)</text>
									</view>

								</view>
								<view class="dsf alc">
									<view class="fz28 col666">
										{{item.email}}
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<!-- 发票管理 -->
			<view class="pl20 pr20 address-card" v-for="(item,index) in list" :key="index">
				<view class="bgfff path-card">
					<view class="pt20 pl24 pr20 ">
						<view class="pb20">
							<view class="pb20">
								<view class="dsf alc pb20">
									<view class="fz28 col777">
										发票抬头
										<text class="pl48 col333">{{item.invoice.title}}</text>
									</view>
								</view>
								<view class="dsf alc pb20">
									<view class="fz28 col777">
										发票金额<text class="pl48 col333">{{item.price}}元</text></view>
								</view>
								<view class="dsf alc pb20">
									<view class="fz28 col777">
										发票时间<text class="pl48 col333">{{item.updated_at}}</text></view>
								</view>
								<view class="dsf alc pb20">
									<view class="fz28 col777">
										开票状态<text class="pl48 col333">{{item.remark}}</text></view>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>





		<!--添加按钮-->
		<view class="add-box">
			<u-tabbar inactiveColor="#fff" :border="false">
				<u-tabbar-item  v-if="tabsindex==0" @click="$go('newmy/invoice/form')" text="添加发票抬头"></u-tabbar-item>
				<u-tabbar-item  v-else  @click="$go('newmy/invoice/form')" text="申请开票"></u-tabbar-item>
			</u-tabbar>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				isIPX: this.isIPX,
				tabs: [{
					name: this.$t("抬头管理"),
					val: 0
				}, {
					name: this.$t("发票管理"),
					val: 1
				}],
				tabsindex: 0,


				// 发票管理数据
				invoice_list: [],
				// 抬头管理数据
				list: [],
				orderList: [],
				IncoiceOrderList: [],
				showInvoice: !1,
				notice: this.$t("以下为可开发票订单,点击对应订单即可申请发票"),
				checkboxValue: [],
				select_invoice_total: 0,
				param: {
					limit: 10,
					page: 1
				},
				last_page: 0,
			}
		},
		onLoad() {

		},
		onShow() {
			this.getList();
		},
		onReachBottom() {
			this.param.page++;
			if (this.param.page > this.last_page) {
				return;
			}
			this.getList();
		},
		methods: {
			glist(e) {
				this.tabsindex = e.index;
				this.param.page = 1;
				this.getList();
			},
			getList() {
				var url = "invoice/list";
				var thod = "get";
				if (this.tabsindex == 1) {
					url = "invoice/get-incoice-order";
					thod = "post";
				}
				this.$api[thod](url, this.param).then(res => {
					if (res.code == 200) {
						if (this.tabsindex == 1) {
							this.list = res.data;
							return;
						}
						if (this.param.page == 1) {
							this.last_page = res.data.last_page;
							this.list = res.data.data;
						} else {
							this.list.push(...res.data.data);

						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav {
		background-color: #fff;
		border-top: 1upx solid #bfe0ff
	}

	.list {
		padding: 14upx 32upx 150upx
	}

	.list .item {
		background-color: #fff;
		border-radius: 20upx;
		padding: 28upx 30upx
	}

	.list .item~.item {
		margin-top: 14upx
	}

	.acea-row {
		display: -webkit-flex;
		display: flex;
		flex: 1;
		min-width: 0
	}

	.acea-row.row-right {
		-o-box-pack: end;
		justify-content: flex-end
	}

	.list .name {
		color: #282828;
		font-size: 30upx;
		font-weight: 600
	}

	.is_detault_button {
		border: 1upx solid #1db0fc;
		color: #1db0fc;
		font-size: 20upx;
		height: 28upx;
		line-height: 28upx;
		margin-left: 18upx;
		text-align: center;
		width: 80upx
	}

	.invoice_type {
		background-color: #fcf0e0;
		color: #d67300;
		font-size: 24upx;
		height: 42upx;
		line-height: 42upx;
		margin-left: 30upx;
		text-align: center;
		width: 172upx
	}

	.invoice_special {
		background-color: #fde9e7;
		color: #e93323
	}

	.list .item-bd {
		margin-top: 18upx
	}

	.list .cell {
		color: #666;
		font-size: 26upx
	}

	.list .cell~.cell {
		margin-top: 12upx
	}

	.list .item-ft {
		margin-top: 11upx
	}

	.list .btn {
		color: #282828;
		cursor: pointer;
		display: -webkit-flex;
		display: flex;
		font-size: 26upx
	}

	.list .btn~.btn {
		margin-left: 35upx
	}

	.add-link {
		border-radius: 43upx;
		bottom: 53upx;
		color: #fff;
		font-size: 30upx;
		height: 86upx;
		left: 30upx;
		line-height: 86upx;
		position: fixed;
		right: 30upx;
		text-align: center
	}

	.wrapp {
		background-color: #e7f1ff;
		overflow: hidden;
		position: relative
	}

	.wrapp .ribbon {
		background-color: #1890ff;
		box-shadow: 0 0 20upx #888;
		overflow: hidden;
		position: absolute;
		right: -100upx;
		top: 16upx;
		transform: rotate(45deg);
		white-space: nowrap
	}

	.wrapp .ribbon ._span {
		color: #fff;
		display: block;
		padding: 10upx 100upx
	}

	page {
		background-color: #eef2fd
	}

	.search-view {
		background-color: #fff;
		padding: 0 10upx 10upx
	}

	.path-card {
		border-radius: 20upx
	}

	.address-detail {
		color: #999
	}

	.address-card {
		padding-bottom: 10upx;
		padding-top: 10upx
	}

	.address-title {
		font-size: 32upx;
		font-weight: 700
	}

	.bgF8FAFE {
		padding-top: 20upx
	}
</style>